@import "common";
@baseFont: 50px;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clear::after,
.clear::before {
    display: table;
    content: "";
}

.clear::after {
    clear: both;
}

body {
    width: 15rem;
    min-width: 320px;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, STHeiTi, sans-serif;
    background: #f2f2f2;
    padding-bottom: (159rem/@baseFont);
   
      
}
html ::-webkit-scrollbar{display: none;}
a,
img {
    -webkit-touch-callout: none;
}

img {
    vertical-align: middle;
}

a {
    -webkit-tap-highlight-color: transparent;
}

em,
i {
    font-style: normal;
}

ul li,
ol li {
    list-style: none;
}

.border-b {
    border-bottom: 1px solid #f2f2f2;
}

header {
    display: flex;
    width: 15rem;
    height: (88rem/@baseFont);
    line-height: (88rem/@baseFont);
    background-color: #ffdb47;

    .classify {
        width: (36rem/@baseFont);
        height: (60rem/@baseFont);
        background: url(../upload/more.png) no-repeat;
        background-size: (36rem/@baseFont) (60rem/@baseFont);
        margin: (10rem/@baseFont) (19rem/@baseFont) (10rem/@baseFont) (35rem/@baseFont);
    }

    .top-img {
        flex: 1;
        text-align: center;

        img {
            width: (390rem/@baseFont);
            height: (76rem/@baseFont);
            margin-top: (8rem/@baseFont);

        }
    }

    .login {
        width: (36rem/@baseFont);
        height: (60rem/@baseFont);
        background: url(../upload/login.png) no-repeat;
        background-size: (36rem/@baseFont) (60rem/@baseFont);
        margin: (10rem/@baseFont) (35rem/@baseFont) (10rem/@baseFont) (19rem/@baseFont);
    }

}

.search {
    position: relative;
    height: (92rem/@baseFont);
    background-color: #ffdb47;
    padding: 0 (24rem/@baseFont);

    input {

        width: 100%;
        box-sizing: border-box;
        height: (64rem / @baseFont);
        background-color: white;
        border-radius: (32rem / @baseFont);
        border: none;
        outline: none;
        padding: (3rem/@baseFont) (20rem/@baseFont) 0 (75rem/@baseFont);
        margin-top: (10rem/@baseFont);
        font-size: (25rem/@baseFont);
        color: #757575;

        &::placeholder {
            font-size: (25rem/@baseFont);
            color: #757575;
        }
    }

    .search-icon {
        position: absolute;
        left: (47rem/@baseFont);
        top: (27rem/@baseFont);
        width: (36rem/@baseFont);
        height: (36rem/@baseFont);
        background: url(../images/search.png) no-repeat;
        background-size: (36rem/@baseFont) (36rem/@baseFont);
    }
}

.index-warp {
    width: 15rem;
    margin: 0 auto;

    .banner-bg {
        width: 15rem;

        background: url(../images/banner-bg.png) no-repeat;
        background-size: 15rem auto;

        .banner {
            padding: 0 (24rem/@baseFont);
            width: (702rem/@baseFont);
            height: (229rem/@baseFont);
            border-radius: (20rem/@baseFont);

            img {
                width: (702rem/@baseFont);
                height: (229rem/@baseFont);
                border-radius: (20rem/@baseFont);




            }
        }

    }

    nav {
        width: 15rem;
        padding-bottom: (24rem/@baseFont);
        background-color: #f7f7f7;

        a {
            display: block;
            float: left;

            width: (150rem/@baseFont);
            height: (142rem/@baseFont);
            text-align: center;

            img {
                width: (84rem/@baseFont);
                height: (84rem/@baseFont);
                margin-top: (24rem/@baseFont);
            }

            p {
                font-size: (22rem/@baseFont);
                color: #666;
                line-height: (30rem/@baseFont);
            }
        }
    }



    .people-boon {
        width: 15rem;
        height: (234rem/@baseFont);

        a {
            float: left;

            &:nth-child(1) {
                width: (375rem/@baseFont);
                height: (234rem/@baseFont);
                border-right: (2rem/@baseFont) solid #f2f2f2;

                img {
                    width: (373rem/@baseFont);
                    height: (234rem/@baseFont);

                }
            }

            &:nth-child(2) {
                width: (187rem/@baseFont);
                height: (234rem/@baseFont);
                border-right: (2rem/@baseFont) solid #f2f2f2;

                img {
                    width: (186rem/@baseFont);
                    height: (234rem/@baseFont);


                }
            }

            &:nth-child(3) {
                width: (187rem/@baseFont);
                height: (234rem/@baseFont);
                float: right;

                img {
                    width: (187rem/@baseFont);
                    height: (234rem/@baseFont);

                }
            }
        }


    }





    .discount {
        height: (516rem/@baseFont);
        padding: 0 (25rem/@baseFont);
        margin-top: (24rem/@baseFont);
        border-top-left-radius: (10rem/@baseFont);
        border-top-right-radius: (10rem/@baseFont);




        >div {
            float: left;
            box-sizing: border-box;
            width: (350rem/@baseFont);
            height: (258rem/@baseFont);
            background-color: white;
            padding: (24rem/@baseFont) (24rem/@baseFont) 0 (24rem/@baseFont);

            &:nth-child(1) {
                border-top-left-radius: (15rem/@baseFont);

            }

            &:nth-child(2) {
                border-top-right-radius: (15rem/@baseFont);

            }

            &:nth-child(3),
            &:nth-child(4) {
                border-bottom: 1px solid #f2f2f2;
            }
        }


        .hb-text {
            display: block;
            font-size: 0;

            h3 {
                display: inline-block;
                margin-right: (10rem/@baseFont);
                font-size: (28rem/@baseFont);
                color: #333;
            }

            span {
                display: inline-block;
                width: (34rem/@baseFont);
                height: (28rem/@baseFont);
                line-height: (28rem/@baseFont);
                background-color: #ffcc00;
                border-radius: (10rem/@baseFont);
                font-size: (20rem/@baseFont);
                color: #333;
                text-align: center;
                font-weight: bold;

            }

            i {
                font-size: ((20rem/@baseFont));
                margin: 0 (5rem/@baseFont);
            }

            em {
                display: block;
                font-size: (24rem/@baseFont);
                color: #999;
            }
        }

        ul li {
            float: left;
            position: relative;
            width: (120rem/@baseFont);

            &:nth-child(1) {
                margin-right: (55rem/@baseFont);
            }

            a {
                display: block;

                img {
                    width: (120rem/@baseFont);
                    height: (120rem/@baseFont);

                }

                .w140 {
                    width: (140rem/@baseFont);
                    height: (140rem/@baseFont);
                }

                p {
                    font-size: (20rem/@baseFont);
                    text-align: center;
                    color: #ff5500;

                }

            }
        }

        .box-cheap,
        .box-spell {
            border-left: 1px solid #f2f2f2;
            padding-left: (24rem/@baseFont);


            ul {

                li {

                    a {
                        display: block;

                        p {
                            position: absolute;
                            left: (-10rem/@baseFont);
                            bottom: (-32rem/@baseFont);
                            width: (150rem/@baseFont);
                            height: (54rem/@baseFont);
                            line-height: (70rem/@baseFont);
                            background: url(../upload/tu-top1.png) no-repeat;
                            background-size: (140rem/@baseFont) (50rem/@baseFont);
                            color: #333;
                            font-size: (18rem/@baseFont);
                        }
                    }
                }
            }
        }



        .list-text {

            .top-man {
                display: inline-block;
                width: (90rem/@baseFont);
                height: (28rem/@baseFont);
                line-height: (28rem/@baseFont);
                border-radius: (14rem/@baseFont);
                text-align: center;
                background-color: #f9f5ee;
                color: #ab813a;
                font-size: (21rem/@baseFont);
                font-weight: normal;
            }
        }

    }


    .recommend {
        height: (172rem/@baseFont);
        padding: 0 (24rem/@baseFont) 0 (24rem/@baseFont);

        .left-title {
            width: (178rem/@baseFont);
            height: (172rem/@baseFont);
            background-color: white;
            padding: (23rem/@baseFont) (18rem/@baseFont) 0;
            border-bottom-left-radius: (15rem/@baseFont);


            h4 {
                font-size: (28rem/@baseFont);
                color: #333;
            }

            p {
                font-size: (24rem/@baseFont);
                color: #999;
            }
        }

        .right-show {
            background-color: white;
            padding-right: (24rem/@baseFont);
            border-bottom-right-radius: (15rem/@baseFont);



            ul {
                li {
                    float: left;
                    width: (125rem/@baseFont);
                    height: (172rem/@baseFont);
                    padding-top: (24rem/@baseFont);


                    text-align: center;

                    img {
                        width: (100rem/@baseFont);
                        height: (100rem/@baseFont);
                    }

                    p {
                        font-size: (20em/@baseFont);
                        color: #333;
                    }
                }
            }
        }

    }

    h1 {
        height: (60rem/@baseFont);
        font-size: (30rem/@baseFont);
        color: #444;
        padding-left: (24rem/@baseFont);
    }

    .top {
        padding: 0 (24rem/@baseFont);

        ul {
            li {
                float: left;
                position: relative;
                width: (226rem/@baseFont);
                height: (266rem/@baseFont);
                background-color: white;
                margin-right: (10rem/@baseFont);
                border-radius: (10rem/@baseFont);

                &:nth-child(3) {
                    margin-right: 0;
                }

                a {
                    display: block;
                    text-align: center;

                    img {
                        width: (150rem/@baseFont);
                        height: (150rem/@baseFont);
                        margin: (15rem/@baseFont) (38rem/@baseFont) 0 (38rem/@baseFont);
                    }

                    .top-bg {
                        width: 100%;
                        height: (93rem/@baseFont);
                        background: url(../upload/top1-bg.png) no-repeat;
                        box-sizing: auto (46rem/@baseFont);
                        position: absolute;
                        left: 0;
                        bottom: 0;

                        .top-mane {
                            position: absolute;
                            top: -15px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: (95rem/@baseFont);
                            height: (30rem/@baseFont);
                            line-height: (30rem/@baseFont);
                            border: (2rem/@baseFont) solid #d9a87a;
                            font-size: (21rem/@baseFont);
                            text-align: center;
                            border-radius: (15rem/@baseFont);
                            background-color: white;
                            color: #d9a87a;
                        }

                        .top-title {
                            font-size: (25rem/@baseFont);
                            color: white;
                            margin-top: (20rem/@baseFont);
                        }

                        .top-desc {
                            color: #f9eee4;
                            font-size: (20rem/@baseFont);
                        }

                    }
                }

                &:nth-child(2) {
                    a {
                        .top-bg {
                            background: url(../upload/top2-bg.png) no-repeat;

                        }

                        .top-mane {
                            border: (2rem/@baseFont) solid #fb7f0a;

                        }
                    }

                }

            }
        }
    }

    .Ulike {
        padding: 0 (24rem/@baseFont);

        .like {
            width: (700rem/@baseFont);
            height: (70rem/@baseFont);
            margin-top: (24rem/@baseFont);


            a {
                display: block;
                width: (700rem/@baseFont);
                height: (70rem/@baseFont);

                img {
                    width: (700rem/@baseFont);
                    height: (60rem/@baseFont);

                }
            }
        }

        ul {
            li {
                float: left;
                position: relative;
                width: (342rem/@baseFont);
                height: (542rem/@baseFont);
                margin-bottom: (18rem/@baseFont);
                background-color: white;
                border-radius: (10rem/@baseFont);

                &:nth-child(2n) {
                    float: right;
                }

                a {
                    display: block;

                    .produt-img {
                        img {
                            width: (342rem/@baseFont);
                            height: (342rem/@baseFont);
                        }
                    }

                    .porduct-title {
                        width: (318rem/@baseFont);
                        height: (67rem/@baseFont);
                        line-height: (34rem/@baseFont);
                        color: #333;
                        font-size: (26rem/@baseFont);
                        margin-left: (12rem/@baseFont);
                        font-weight: bold;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;


                    }

                    .cuxiao-tag {
                        display: flex;
                        margin-top: (14rem/@baseFont);
                        margin-left: (12rem/@baseFont);

                        img {
                            width: (48rem/@baseFont);
                            height: (24rem/@baseFont);
                            margin-right: (8rem/@baseFont);
                        }

                        span {
                            display: inline-block;
                            height: (22rem/@baseFont);
                            padding: (2rem/@baseFont) (12rem/@baseFont);
                            line-height: (20rem/@baseFont);
                            border: (1rem/@baseFont) solid #ffbb00;
                            border-radius: (5rem/@baseFont);
                            font-size: (17rem/@baseFont);
                            color: #333;
                            background-color: #fefbee;
                        }
                    }

                    .price {
                        display: flex;
                        position: absolute;
                        left: (12rem/@baseFont);
                        bottom: (12rem/@baseFont);
                        height: (38rem/@baseFont);
                        line-height: (38rem/@baseFont);
                        padding-left: (12rem/@baseFont);
                        margin-top: (30rem/@baseFont);

                        .real-price,
                        .last-price {
                            font-size: (26rem/@baseFont);
                            color: #ff4422;
                            font-weight: bold;
                        }

                        .flag {
                            font-size: (36rem/@baseFont);
                            color: #ff4422;
                            font-weight: bold;
                        }

                        .price-comments {
                            font-size: (20rem/@baseFont);
                            color: #99a6c4;
                            margin: (-5rem/@baseFont) 0 0 (14rem/@baseFont);
                        }

                    }

                }
            }
        }
    }


    .fooder {
       
        display: flex;
        position: fixed;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 15rem;
         line-height: (20rem/@baseFont);
        background-color: white;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);

       



        a {
            width: (150rem/@baseFont);
            height: (100rem/@baseFont);
            text-align: center;
          

            img {
                width: (48rem/@baseFont);
                height: (48rem/@baseFont);
                margin-top: (12rem/@baseFont);
            }

            span {
                font-size: (20rem/@baseFont);
                color: #666;
                display: block;


            }

            .active {
                color: black;
                font-weight: bold;
            }

        }
    }


    .top-login {
        position: fixed;
        left: 50%;
        bottom: (100rem/@baseFont);
        transform: translateX(-50%);
        padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
        padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
        width: 15rem;
        height: (90rem/@baseFont);
        background-color: black;
        opacity: 1;

        img {
            width: 14rem;
            height: (90rem/@baseFont);
        }









    }
}

.return-top {
    a {
        position: fixed;
        right: (15rem/@baseFont);
        bottom: (185rem/@baseFont);
        width: (100rem/@baseFont);
        height: (100rem/@baseFont);
        background: url(../upload/top.png) no-repeat;
        background-size: (100rem/@baseFont) (100rem/@baseFont);

    }
}

.new-login {
    a {
        position: fixed;
        right: (10rem/@baseFont);
        top: (50rem/@baseFont);
        width: (100rem/@baseFont);
        height: (145rem/@baseFont);


    }

    img {
        width: (100rem/@baseFont);
        height: (145rem/@baseFont);
    }

}

@media screen and (width: 375px) and (height: 812px){
    .fooder {
        padding-bottom: (34rem/@baseFont);
    }
   
}

